<template>
 <div id="jsmind_container" style="width: 100%;height:100%"></div>
</template>

<script>
import { defineComponent,onMounted } from "vue";




export default defineComponent({
name:'JSMIND',
props: {},

emits: {},

setup(){
onMounted(()=>{

    var mind = {
    /* 元数据，定义思维导图的名称、作者、版本等信息 */
    "meta":{
        "name":"example",
        "author":"hizzgdev@163.com",
        "version":"0.2"
    },
    /* 数据格式声明 */
    "format":"node_array",
    /* 数据内容 */
    "data":[
    {"id":"root", "isroot":true, "topic":"jsMind"},

{"id":"easy", "parentid":"root", "topic":"Easy", "direction":"left"},
{"id":"easy1", "parentid":"easy", "topic":"Easy to show"},
{"id":"easy2", "parentid":"easy", "topic":"Easy to edit"},
{"id":"easy3", "parentid":"easy", "topic":"Easy to store"},
{"id":"easy4", "parentid":"easy", "topic":"Easy to embed"},

{"id":"open", "parentid":"root", "topic":"Open Source", "expanded":false, "direction":"right"},
{"id":"open1", "parentid":"open", "topic":"on GitHub"},
{"id":"open2", "parentid":"open", "topic":"BSD License"},

{"id":"powerful", "parentid":"root", "topic":"Powerful", "direction":"right"},
{"id":"powerful1", "parentid":"powerful", "topic":"Base on Javascript"},
{"id":"powerful2", "parentid":"powerful", "topic":"Base on HTML5"},
    ]
};
var options = {
   container : 'jsmind_container',         // [必选] 容器的ID
   editable : true,       // 是否启用编辑
   theme : 'primary',           // 主题
 mode :'full',           // 布局模式
//    support_html : true,    // 是否支持节点里的HTML元素
//    log_level: 'info',      // 日志级别
//    view:{
//        engine: 'svg',   // 思维导图各节点之间线条的绘制引擎
//        hmargin:100,        // 思维导图距容器外框的最小水平距离
//        vmargin:50,         // 思维导图距容器外框的最小垂直距离
//        line_width:2,       // 思维导图线条的粗细
//        line_color:'red',  // 思维导图线条的颜色
//        draggable: true,   // 当容器不能完全容纳思维导图时，是否允许拖动画布代替鼠标滚动
//        hide_scrollbars_when_draggable: false // 当设置 draggable = true 时，是否隐藏滚动条
//    },
//    layout:{
//        hspace:30,          // 节点之间的水平间距
//        vspace:20,          // 节点之间的垂直间距
//        pspace:13           // 节点与连接线之间的水平间距（用于容纳节点收缩/展开控制器）
//    },
//    shortcut:{
//        enable:true,        // 是否启用快捷键
//        handles:{},         // 命名的快捷键事件处理器
//        mapping:{           // 快捷键映射
//            addchild   : [45, 4096+13], 	// <Insert>, <Ctrl> + <Enter>
//            addbrother : 13,    // <Enter>
//            editnode   : 113,   // <F2>
//            delnode    : 46,    // <Delete>
//            toggle     : 32,    // <Space>
//            left       : 37,    // <Left>
//            up         : 38,    // <Up>
//            right      : 39,    // <Right>
//            down       : 40,    // <Down>
//        }
//    },
};
            var jm = new window.jsMind(options);
            jm.show(mind);
}
    
)
}

})
</script>

<style lang="scss" scoped>

</style>